<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #myCanvas{
            border: 1px solid #ccc;
            margin: 20px auto;
            display:block;
        }
    </style>
</head>
<body>
    

    <canvas id="myCanvas" width="600" height="600" color="#f0f0f0">
        
    </canvas>
    
</body>
<script>
    var canvas=document.getElementById("myCanvas");
    var pencil=canvas.getContext("2d");
    function random(m,n){
        return Math.floor(Math.random()*(n-m+1)+m);
    }
    function Ball(){
        //设置属性
        //随机小球的半径
        this.r = random(5,10);
        //随机小球的颜色
        this.color = "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
        //随机小球圆心x,圆心y
        this.x = random(this.r,canvas.width-this.r);//保证小球不出去
        this.y = random(this.r,canvas.height-this.r);
        //随机速度（控制移动方向）
        //水平方向上的速度    一半几率  random(0,1) ? 1：-1     (random(1,10) >= 5 ? 1 : -1)
        this.speedX = random(2,6)*(random(0,1)?1:-1);
        //垂直方向上的速度
        this.speedY = random(2,6)*(random(0,1)?1:-1);
    }
        Ball.prototype.move = function(){
            //
            this.x += this.speedX;
            this.y += this.speedY;
            //小球碰撞四个边界反弹
            //左边界
            if(this.x <= this.r){
                this.x = this.r;
                //反弹
                this.speedX *= -1;
            }
            //右边界
            if(this.x >= canvas.width - this.r){
                this.x =canvas.width - this.r ;
                //反弹
                this.speedX *= -1;
            }
            //上边界
            if(this.y <= this.r){
                this.y = this.r;
                //反弹
                this.speedY *= -1;
            }
            //下边界
            if(this.y >= canvas.height- this.r){
                this.y =canvas.height - this.r ;
                //反弹
                this.speedY *= -1;	
            }
        }
        //绘制小球的方法
        Ball.prototype.draw = function(){
            //开始绘制
            pencil.beginPath();
            pencil.arc(this.x,this.y,this.r,0,Math.PI*2,false);
        //填充
            pencil.fillStyle = this.color;
            pencil.fill();
        }
        var balls = [];//存储所有的小球对象
        //创建对象
        for(var i = 0;i < 100;i++){
            var ball = new Ball();
            balls.push(ball);
        }
        pencil.shadowColor = "lightcyan";
            pencil.shadowBlur = 30;
        //让小球移动起来
        setInterval(function(){
            //每次小球重新绘制和移动移动之前,清空画布中的内容
            pencil.clearRect(0,0,canvas.width,canvas.height); 				
            pencil.beginPath();
            pencil.fillStyle = "black";
            pencil.fillRect(0,0,canvas.width,canvas.height);
            for(var i=0;i<balls.length;i++){
                balls[i].draw();//绘制小球
                balls[i].move();//移动小球
            }
        },20)
        
</script>
</html>

